<!-- Tommy -->
<title>菜单管理</title>

<!-- ajax layout which only needs content area -->
<div class="page-header">
    <h1>
        菜单管理
    </h1>
</div><!-- /.page-header -->

<div class="row" data-ng-controller="pageContentController" data-ng-cloak>
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <!-- 结果表格 -->
        <div data-ng-controller="resultTableController" data-ng-show="resultTableData">
            <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4" style="padding: 0px">
                <div class="input-group">
                        <span id="searchInResultToggle" class="input-group-addon"><i
                                class="ace-icon fa fa-search"></i></span>
                    <input id="searchInResult" type="text" class="form-control" placeholder="在结果中搜索"
                           data-ng-model="searchInResult"/> <!-- TODO style -->
                </div>
            </div>
            <table id="resultTable" class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                  
                    <th data-ng-repeat="(reference, displayName) in resultTableData.tableHead">{{displayName}}
                    </th>
                    
             
                    <th>
                        <button class="btn btn-xs btn-success" data-ng-click="createModal('add','')"> 
                            <i class="ace-icon fa fa-plus bigger-120"></i>
                        </button>
               
                    </th>
                   
                </tr>
                </thead>

                <tbody>
                <tr data-ng-repeat="row in resultTableData.tableRow | filter: searchInResult"
                    data-row-id="{{row[resultTableData.identity]}}">

                  
                    <td data-ng-repeat="(key,value) in row">
                        {{value}}
                    </td>

                    <td>
                        <div class="hidden-sm hidden-xs btn-group">
                            <button class="btn btn-xs btn-success"
                                    data-ng-click="createModal('view',row[resultTableData.identity])">
                                <i class="ace-icon fa fa-search-plus bigger-120"></i>
                            </button>

                            <button class="btn btn-xs btn-info"
                                    data-ng-click="createModal('edit',row[resultTableData.identity])">
                                <i class="ace-icon fa fa-pencil bigger-120"></i>
                            </button>

                            <button class="btn btn-xs btn-danger"
                                    data-ng-click="createModal('del',row[resultTableData.identity])">
                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
                            </button>

                        </div>

                        <div class="hidden-md hidden-lg">
                            <div class="inline pos-rel">
                                <button class="btn btn-minier btn-primary dropdown-toggle"
                                        data-toggle="dropdown"
                                        data-position="auto">
                                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                </button>

                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                    <li>
                                        <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
													<span class="green"
                                                          data-ng-click="createModal('view',row[resultTableData.identity])">
														<i class="ace-icon fa fa-search-plus bigger-120"></i>
													</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
													<span class="blue"
                                                          data-ng-click="createModal('edit',row[resultTableData.identity])">
														<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
													</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
													<span class="red"
                                                          data-ng-click="createModal('del',row[resultTableData.identity])">
														<i class="ace-icon fa fa-trash-o bigger-120"></i>
													</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>



        </div>
        <!-- /结果表格 -->
        <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" data-ng-controller="modalController">
            <div class="modal-dialog" role="document">


                <!-- view modal -->
                <div class="modal-content" data-ng-if="modal.modalType == 'view'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">查看菜单详细信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>ID</label>
                                <input name="menuID" type="text"
                                       class="form-control" data-ng-model="modal.modelData.id" readonly/>

                                <div class="space space-4"></div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>图标</label>
                                <input name="menuIcon" type="text"
                                       class="form-control" data-ng-model="modal.modelData.icon" readonly/>

                                <div class="space space-4"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>菜单名</label>
                                <input name="menuName" type="text"
                                       class="form-control" data-ng-model="modal.modelData.name" readonly/>

                                <div class="space space-4"></div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>上级菜单</label>
                                <input name="parentName" class="form-control"
                                        data-ng-model="modal.modelData.parentName"
                                      
                                      readonly>
                                </input>

                                <div class="space space-4"></div>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-xs-12 col-sm-12 col-md-10 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>链接</label>
                                <input name="menuLink" type="text"
                                       class="form-control" data-ng-model="modal.modelData.link" readonly/>

                                <div class="space space-4"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">

                        <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                    </div>
                </div>
                <!-- /view modal -->

                <!-- edit modal -->
                <div class="modal-content" data-ng-if="modal.modalType == 'edit'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改这个菜单</h4>
                    </div>
					<form name="editModalForm" data-ng-submit="submitEditModal(editModalForm.$valid)" novalidate>
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>编号</label>
                                <input name="menuID" type="text"
                                       class="form-control" value="{{modal.modelData.id}}" />

                                <div class="space space-4"></div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1" data-ng-class="{'has-error': editModalForm.menuIcon.$invalid && editFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>图标</label>
                                <input name="menuIcon" type="text"
                                       class="form-control" data-ng-model="modal.modelData.icon" required/>

                                <div class="space space-4"></div>
                                <p data-ng-show="editModalForm.menuIcon.$invalid && editFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>菜单icon未填写</small>
                                    </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1" data-ng-class="{'has-error': editModalForm.menuName.$invalid && editFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>菜单名</label>
                                <input name="menuName" type="text"
                                       class="form-control" data-ng-model="modal.modelData.name" required/>

                                <div class="space space-4"></div>
                                 <p data-ng-show="editModalForm.menuName.$invalid && editFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>菜单名未填写</small>
                                    </p>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1" data-ng-class="{'has-error': editModalForm.parentMenu.$invalid && editFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>上级菜单</label>
                                <select name="parentMenu" class="form-control"
                                        data-ng-model="modal.modelData.parentId"
                                        data-ng-options=" parentMenu.value as parentMenu.displayName for parentMenu in modal.modelRange.parentIdRange" required>
                                </select>

                                <div class="space space-4"></div>
                                <p data-ng-show="editModalForm.parentMenu.$invalid && editFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>上级菜单未选择</small>
                                    </p>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-xs-12 col-sm-12 col-md-10 col-md-push-1" data-ng-class="{'has-error': editModalForm.menuLink.$invalid && editFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>链接</label>
                                <input name="menuLink" type="text"
                                       class="form-control" data-ng-model="modal.modelData.link"/>

                                <div class="space space-4"></div>
                                <p data-ng-show="editModalForm.menuLink.$invalid && editFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>链接未填写</small>
                                    </p>
                            </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12">
                                    <div class="space space-4"></div>
                                    <div class="alert alert-danger" role="alert"
                                         data-ng-if="editFormShowResult">
                                        <h4>提交的修改：</h4>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div data-ng-repeat="(k,v) in modal.modelData">
                                                    <div data-ng-if=" modalOriginal.modelData[k]!=modal.modelData[k] ">
                                                        <p>{{k}}: {{modalOriginal.modelData[k]}} >> {{v}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary"
                               value="确认">

                        <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                    </div>
				 </form>
                </div>
                <!-- /edit modal -->
                <!-- add modal -->
                <div class="modal-content" data-ng-if="modal.modalType == 'add'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">添加一个新的菜单</h4>
                    </div>
                    
                    <form name="addModalForm" data-ng-submit="submitAddModal(addModalForm.$valid)" novalidate>
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>编号</label>
                                <input name="menuID" type="text"
                                       class="form-control" placeholder="自动生成" disabled/>

                                <div class="space space-4"></div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1" data-ng-class="{'has-error': addModalForm.menuIcon.$invalid && addFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>图标</label>
                                <input name="menuIcon" type="text"
                                       class="form-control" data-ng-model="modal.modelData.icon" required/>

                                <div class="space space-4"></div>
                                <p data-ng-show="addModalForm.menuIcon.$invalid && addFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>菜单icon未填写</small>
                                    </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1" data-ng-class="{'has-error': addModalForm.menuName.$invalid && addFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>菜单名</label>
                                <input name="menuName" type="text"
                                       class="form-control" data-ng-model="modal.modelData.name" required/>

                                <div class="space space-4"></div>
                                 <p data-ng-show="addModalForm.menuName.$invalid && addFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>菜单名未填写</small>
                                    </p>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1" data-ng-class="{'has-error': addModalForm.parentMenu.$invalid && addFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>上级菜单</label>
                                <select name="parentMenu" class="form-control"
                                        data-ng-model="modal.modelData.parentId"
                                        data-ng-options=" parentMenu.value as parentMenu.displayName for parentMenu in modal.modelRange.parentIdRange" required>
                                </select>

                                <div class="space space-4"></div>
                                <p data-ng-show="addModalForm.parentMenu.$invalid && addFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>上级菜单未选择</small>
                                    </p>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-xs-12 col-sm-12 col-md-10 col-md-push-1" data-ng-class="{'has-error': addModalForm.menuLink.$invalid && addFormShowInvalidInfo}">
                                <div class="space space-4"></div>
                                <label>链接</label>
                                <input name="menuLink" type="text"
                                       class="form-control" data-ng-model="modal.modelData.link"/>

                                <div class="space space-4"></div>
                                <p data-ng-show="addModalForm.menuLink.$invalid && addFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>链接未填写</small>
                                    </p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                                <div class="col-xs-12">
                                    <div class="space space-4"></div>
                                    <div class="alert alert-danger" role="alert"
                                         data-ng-if="addFormShowResult">
                                        <h4>提交的修改：</h4>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div data-ng-repeat="(k,v) in modal.modelData">
                                                    <div data-ng-if=" modalOriginal.modelData[k]!=modal.modelData[k] ">
                                                        <p>{{k}}: {{modalOriginal.modelData[k]}} >> {{v}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary"
                               value="确认">

                        <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                    </div>
				 </form>
                
                </div>
                <!-- /add modal -->
                <!-- del modal -->
                <div class="modal-content" data-ng-if="modal.modalType == 'del'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="modalLabel">删除这个菜单</h4>
                    </div>
                    <div class="modal-body">

                        <div class="row" data-ng-repeat="(k,v) in modal.modelData">
                            <div class="col-xs-12">
                                {{k}} : {{v}}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-primary"
                               data-ng-click="submitDelModal()" value="确认">

                        <input type="button" class="btn btn-default" data-dismiss="modal" " value="关闭">
                    </div>
                </div>
                <!-- /del modal -->
            </div>
        </div>
        <!-- /Modal -->
        <!-- PAGE CONTENT ENDS -->
    </div>
    <!-- /.col -->
</div><!-- /.row -->


<!-- page specific plugin scripts -->
<script type="text/javascript">

    var scripts = [null, "lib/assets/js/date-time/moment.js", "lib/assets/js/date-time/daterangepicker.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        //inline scripts related to this page
        jQuery(function ($) {
            //dataTable

        });


        //AngularJS
        var app = angular.module('contentApp');
        var servletLocation = "/yangming_rms/menu";
        var messageHandler = function (data) {
            if (data != null && data != undefined && data.messageType !=undefined) {
                if(data.messageType == 'error'){
                    data.messageType = 'danger';
                }
                $.bootstrapGrowl(data.message, {
                    type: data.messageType, // (null, 'info', 'error', 'success')
                    offset: {from: 'top', amount: 50}, // 'top', or 'bottom'
                    align: 'right', // ('left', 'right', or 'center')
                    width: 250, // (integer, or 'auto')
                    delay: function (type) {
                        if (type == 'error') {
                            return 7000;
                        } else {
                            return 3000;
                        }
                    }(data.messageType),
                    allow_dismiss: true,
                    stackup_spacing: 10 // spacing between consecutively stacked growls.
                });
            }
            return data;
        };

        //页面控制器
        app.controller("pageContentController", function ($scope) {
            $scope.$on("CreateModalTOParent", function (event, msg) {
                $scope.$broadcast("CreateModal", msg);
            });
            $scope.$on("TableResultTOParent",function(event, msg){
            	$scope.$broadcast("TableResult", msg);
            });
        });


        //结果表格控制器
        app.controller("resultTableController", function ($scope, $http) {

            $scope.getResult = function () {
                var sendData = {
                    'service': 'searchMenus',
                };
                $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here
                    //获取到结果列表
                    $scope.resultTableData = messageHandler(response);
                });
            };

            $scope.getResult();
            $scope.$on("TableResult", function (event, msg) {
            	$scope.getResult();
            });
            $scope.createModal = function (view, modelData) {
            	if(view=="add"){
            		var message = {};
            		message["modalType"] = view;
            		message["modelRange"] = {}
            		message.modelRange["parentIdRange"] = []
            		message.modelRange["parentIdRange"].push({"value":1,"displayName":"系统根菜单"});
            		 $scope.$emit("CreateModalTOParent", message);
            		 return;
            	}
            	var sendData = {};
            	sendData["service"] = "loadMenu";
            	sendData["menu_id"] = modelData;
				
                $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here
					console.log(response);
                    response["modalType"] = view;
                    response["modelRange"].parentIdRange.push({"value":1,"displayName":"系统根菜单"});
                    console.log(response);
                    //将更新事件冒泡到父控制器
                    $scope.$emit("CreateModalTOParent", messageHandler(response));
                });
            }

        });

        //Modal控制器
        app.controller("modalController", function ($scope, $http) {
            $scope.$on("CreateModal", function (event, msg) {
                $scope.modal = msg;
                $scope.modalOriginal = jQuery.extend(true, {}, msg);
                $scope.editFormShowInvalidInfo = false;
                $scope.editFormShowResult = false;
                $scope.addFormShowInvalidInfo = false;
                $scope.addFormShowResult = false;
                $("#modal").modal('toggle');
            });

            $scope.submitEditModal = function (valid) {
                if (valid && $scope.editFormShowInvalidInfo) {
                    var sendData = {};
                    sendData["service"] = "updateMenu";
                    sendData["menu_id"] = $scope.modalOriginal.modelData.id;
                    sendData["menu_icon"] = $scope.modal.modelData.icon;
                    sendData["menu_name"] = $scope.modal.modelData.name;
                    sendData["menu_link"] = $scope.modal.modelData.link;
                    sendData["menu_parent_id"] = $scope.modal.modelData.parentId;
                    
                    console.log(sendData);
                    $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here
                    	console.log(response);
                    	messageHandler(response);
                        if (response.messageType == "success") {
                        	$scope.$emit("TableResultTOParent");
                            $("#modal").modal('toggle');
                        }
                    });
                }
                if (valid) {
                    $scope.editFormShowResult = true;
                }
                $scope.editFormShowInvalidInfo = true;
            };
            $scope.submitDelModal = function () {

                var sendData = {};
                sendData["service"] = "deleteMenu";
                sendData["menu_id"] = $scope.modalOriginal.modelData.id;

                console.log(sendData);
                $http.post(servletLocation, sendData).success(function (response) {
                    messageHandler(response);
                    console.log(response);
                    if (response.messageType == "success") {
                        $scope.$emit("TableResultTOParent");
                        $("#modal").modal('toggle');
                    }
                });

            };
            $scope.submitAddModal = function (valid) {
                if (valid && $scope.addFormShowInvalidInfo) {
                    var sendData = {};
                    sendData["service"] = "addMenu";
                    sendData["menu_icon"] = $scope.modal.modelData.icon;
                    sendData["menu_name"] = $scope.modal.modelData.name;
                    sendData["menu_link"] = $scope.modal.modelData.link;
                    sendData["menu_parent_id"] = $scope.modal.modelData.parentId;
                    console.log(sendData);
                    $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here
                        messageHandler(response);
                        console.log(response);
                        if (response.messageType == "success") {
                            $scope.$emit("TableResultTOParent");
                            $("#modal").modal('toggle');
                        }
                    });
                }
                if (valid) {
                    $scope.addFormShowResult = true;
                }
                $scope.addFormShowInvalidInfo = true;
            }

        });


    });

</script>